<template>
  <div id="container">
    <!-- 停车数据 -->
    <ParkingData />
    <div class="ParkArea">
      <!-- 停车区局饼图 -->
      <div class="pie">
        <ParkingAreaPie />
      </div>
      <!-- 停车区局柱状图 -->
      <div class="col">
        <Parkinghistogram />
      </div>
    </div>
    <!-- 用户增长图 -->
    <UserGrowth />
    <!-- 表格 -->
    <UnitInformation />
    
  </div>
</template>

<script>
import UnitInformation from "./components/UnitInformation.vue";
import UserGrowth from "./components/UserGrowth.vue";
import ParkingAreaPie from "./components/ParkingAreaPie.vue";
import Parkinghistogram from "./components/Parkinghistogram.vue";
import ParkingData from "./components/ParkingData.vue";
export default {
  components: {
    UnitInformation,
    UserGrowth,
    ParkingAreaPie,
    Parkinghistogram,
    ParkingData,
  },
};
</script>

<style lang="less" scoped>
#container {
  // overflow: auto;
  .ParkArea {
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: space-between;
    .pie {
      flex: 2;
    }
    .col {
      flex: 1;
    }
  }
}
</style>